<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>数据劫持Vue3.x</title>
	</head>
	<body>
		<h2 id="app">数据劫持</h2>
		<script>
			// 模拟 Vue 中的 data 选项
			let data = {
				msg: 'hello',
				count: 0,
			}
			// 模拟 Vue 实例
			let vm = new Proxy(data, {
				// 当访问 vm 的成员会执行
				get(target, key) {
					console.log('get, key: ', key, target[key])
					return target[key]
				},
				// 当设置 vm 的成员会执行
				set(target, key, newValue) {
					console.log('set, key: ', key, newValue)
					if (target[key] === newValue) {
						return
					}
					target[key] = newValue
					document.querySelector('#app').textContent = target[key]
				},
			})
            // data = vm
			// 测试
			vm.msg = 'Hello World'
			console.log(vm.msg)
		</script>
	</body>
</html>
